<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<p>{{msg}}</p>
		<input type="text" v-model="msg"><br/>

		<!-- 深度监听obj.a才能出来 -->
		<p>{{obj.a}}</p>
		<input type="text" v-model="obj.a">
		
	</div>
	<script src="vue.js"></script>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'hello',
				obj:{
					a:1
				}
			},
			watch:{
				msg:function(newVal,oldVal){
					console.log('msg变化了')
				},
				obj:{
					handler:function(){
						console.log('obj.a变化了')
					},
					deep:true //深度监听
					/*
					vue在运行时，对于非基本数据类型只会监听引用，添加deep：true会给每一层数据绑定监听器，如果有一个值变化都会做出相应
					*/
				}
			}
		})
	</script>
</body>
</html>